<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="选择巡检设备" width="50%" align-center>
      <px-row>
        <px-col
          ><InspectRulesTable
            v-model:query-params="queryParams"
            :table-data="tableData"
            :total="total"
            :tableColumns="tableEqiupColums"
            @select-items="selectTreeItems"
            @query-table="queryTable"
        /></px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="close">取消</px-button>
          <px-button type="primary" @click="confirm"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { queryEquipTable } from "@/api/erc/inspectPlan";
import { ref, watch } from "vue";
import { TableItem } from "../../types";
import InspectRulesTable from "./InspectRulesTable.vue";
const dialogVisible = defineModel("isView");
const queryParams = ref({ facCode: "", pageNum: 1, pageSize: 20 });
const tableData = ref<any>([]);

const tableEqiupColums = ref<TableItem[]>([
  { prop: "selection", minWidth: "55", fixed: "left" },
  { prop: "eqpId", label: "设备编号", minWidth: "120", showOverflowTooltip: true, fixed: "left" },
  { prop: "eqpName", label: "设备名称", minWidth: "160", showOverflowTooltip: true },
  {
    prop: "typeNameAll",
    label: "设备系统",
    minWidth: "200",
    showOverflowTooltip: true,
    customFun: row => {
      if (row) {
        const strArr = row.split("/");
        if (strArr.length > 1) {
          strArr.pop();
          if (strArr.length > 1) {
            return strArr.join("/");
          } else {
            return strArr.join("");
          }
        } else {
          return row;
        }
      } else {
        return "-";
      }
    }
  },
  { prop: "typeName", label: "设备类型", minWidth: "160", showOverflowTooltip: true },
  { prop: "specification", label: "设备型号", minWidth: "160", showOverflowTooltip: true },
  { prop: "positionNameAll", label: "位置信息", minWidth: "200", showOverflowTooltip: true }
]);
defineOptions({
  name: "SelectInspectRules"
});
const props = defineProps<{ facCode: string; checkArea: string; typeCodeList: any[] }>();
const emits = defineEmits(["selectItems"]);
const total = ref(0);
let selected: any[] = [];
async function queryTable() {
  let tableDataRaw = await queryEquipTable(
    Object.assign(queryParams.value, {
      facCode: props.facCode,
      positionCodeList: props.checkArea ? props.checkArea.split(",") : [],
      typeCodeList: props.typeCodeList || []
    })
  );
  const { data, pageNum, pageSize, total: totalRaw } = tableDataRaw;
  queryParams.value.pageNum = pageNum;
  queryParams.value.pageSize = pageSize;
  total.value = totalRaw;
  tableData.value = data;
}
watch(
  dialogVisible,
  async val => {
    if (val) {
      await queryTable();
    } else {
      queryParams.value.pageNum = 1;
      queryParams.value.pageSize = 20;
      total.value = 0;
      tableData.value = [];
    }
  },
  { immediate: true }
);
function resetTable() {}
function selectTreeItems(val) {
  selected = val;
}
function changeFactoryArea(val) {
  queryParams.value.facCode = val;
}
function close() {
  dialogVisible.value = false;
}
function confirm() {
  emits("selectItems", selected);

  dialogVisible.value = false;
  selected = [];
}
</script>
<style lang="scss" scoped>
:deep(.px-dialog__footer) {
  padding: 0 24px;
  padding-top: 16px;
}
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
